<template>
  <div class="tongji-card">
    <div class="tongji-card-title">
      {{ title }}
    </div>
    <div class="tongji-card-data">
      {{ data }}
    </div>
    <div class="tongji-card-tip">
      {{ tip }}
    </div>
  </div>
</template>

<script>
export default {
  props: ["title", "data", "tip"],
};
</script>

<style>
.tongji-card {
  width: 151px;
  height: 148px;
  background-color: rgba(0, 110, 255, 0.08);
  border: 1px solid  rgba(0, 110, 255, 0.09);;
  border-radius: 4px;
  padding: 10px 0;
}

.tongji-card-title {
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  color: rgba(51, 51, 51, 0.898039215686275);
  font-size: 14px;
  text-align: center;
  height: 50px;
  line-height: 50px;
}

.tongji-card-data {
  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC",
    sans-serif;
  font-weight: 650;
  font-size: 36px;
  text-align: center;
  color: rgba(0, 110, 255, 0.898039215686275);
  height: 50px;
  line-height: 50px;
}

.tongji-card-tip {
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-size: 12px;
  text-align: center;
  color: #999999;
  height: 50px;
  line-height: 50px;
}
</style>